<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">欢迎登陆文库吧</div>
            <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="submitForm()"
                label-width="0px" class="ms-content">
                <el-form-item prop="cdkcard">
                    <el-input v-model="dataForm.cdkcard" placeholder="账号">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input type="password" placeholder="密码" v-model="dataForm.code">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-pwd">
                    <label>
                        <el-checkbox class="needsclick" size="medium" v-model="checked">记住密码</el-checkbox>
                    </label>
                </div>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()" :loading="loading">登录</el-button>
                </div>

                <p class="login-tips">官方购买地址：<a :href="gourl" @click="goTaobao()" class="alink" target="_blank">
                        点击进入</a>
                </p>
            </el-form>
            <!-- </div>
        <div class="foot">
          <div>Copyright 2008-2019,文库吧 软著登记号(219SR0379150),anwenbin (http://app.anweizhi.com),All Rights Reserved
            <p>湖南嘉鼎贸易有限公司,湖南希怀盛贸易有限公司,广州佳闻信息科技有限公司</p>
            版权声明：凡注明本站内容本人许可，任何人或机构不得以任何形式对本站内容进行复制作商业用途
        </div>
        </div> -->

            <!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->

        </div>
        <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
    </div>

</template>

<script>
    export default {
        data: function () {
            return {
                loading: false,
                checked: true,
                gourl: 'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911debSaAzUa&ft=t&id=605148708976',
                dataForm: {
                    cdkcard: '',
                    code: ''
                },
                rules: {
                    cdkcard: [{
                        required: true,
                        message: '请输入卡密',
                        trigger: 'blur'
                    }],
                    code: [{
                        required: true,
                        message: '请输入授权码',
                        trigger: 'blur'
                    }]
                }
            }
        },
        components: {

            'remote-js': {
                render(createElement) {


                    return createElement('script', {
                        attrs: {
                            type: 'text/javascript',
                            src: this.src
                        }
                    });
                },
                props: {
                    src: {
                        type: String,
                        required: true
                    },
                },
            },
        },

        mounted() {
            this.getlocalStorage()
            this.checked = true


        },

        methods: {
            submitForm() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {


                        this.loading = true
                        this.$http({
                            url: this.$http.adornUrl('/app/cardsLogin'),
                            method: 'post',
                            data: this.$http.adornData({
                                cdkcard: this.dataForm.cdkcard,
                                code: this.dataForm.code
                            })
                        }).then(({
                            data
                        }) => {
                            this.loading = false
                            if (data && data.code === 0) {
                                this.$message.success('登陆成功！')
                                this.$cookie.set('token', data.token)
                                // 5.跳转到home页
                                localStorage.setItem('token', data.token)
                                if (this.checked === true) {
                                    this.setlocalStorage(this.dataForm.cdkcard, this.dataForm.code, this
                                        .checked)
                                } else {
                                    this.clearlocaStorage()
                                }
                                this.$router.push('/')
                            } else {
                                this.$message.error(data.msg)
                            }
                        }).catch((error) => {
                            this.loading = false;
                            this.$message.error('请求失败,请重试')
                        });

                    }
                })
            },
            // 存储账号密码
            setlocalStorage(c_name, c_pwd, check) {
                window.localStorage.setItem('username', c_name)
                window.localStorage.setItem('password', c_pwd)
                window.localStorage.setItem('checked', check)
            },
            // 获取账号密码
            getlocalStorage() {
                this.dataForm.cdkcard = localStorage.getItem('username') //保存到保存数据的地方
                this.dataForm.code = localStorage.getItem('password')
                this.checked = Boolean(localStorage.getItem('checked'));
            },
            // 清除账号密码
            clearlocaStorage() {
                this.setlocalStorage('', '', '')
            },

            getRandomInt: function (min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min
            },
            goTaobao() {

                var cname = returnCitySN['cname'];
         
                //默认的淘宝地址
                 var defalutUrl =
                    'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911debo7fW2d&ft=t&id=609183268274';
                if (cname.indexOf("广州") >= 0) {
                    this.gourl = defalutUrl;

                } else if (cname.indexOf("湖南") >= 0) {
                    this.gourl = defalutUrl;
                } else {
                      this.gourl = 'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911deb1sHYLj&ft=t&id=610159521751';
                    // var random = this.getRandomInt(1, 100)
                    // if (random % 2 == 0) {
                     
                    // } else {
                    //     this.gourl = defalutUrl;
                    // }

                }

            },
        },

    }

</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/03-bj.jpg);
        background-size: 100%;
    }

    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .ms-content {
        padding: 30px 30px;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
        letter-spacing: 4px;
    }

    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: rgb(214, 35, 89);
    }

    .login-pwd {
        margin-bottom: 10px;
    }

    .alink {
        color: red;
        letter-spacing: 1px;
        text-decoration: underline;
    }

    .foot {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }

    .foot div {
        margin: 0 auto;
    }

</style>
